<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet">

    <!-- Animate.css -->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" th:href="@{/css/icomoon.css}">
    <!-- Bootstrap  -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">

    <!-- Magnific Popup -->
    <link rel="stylesheet" th:href="@{/css/magnific-popup.css}">

    <!-- Owl Carousel  -->
    <link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/css/owl.theme.default.min.css}">

    <!-- Flexslider  -->
    <link rel="stylesheet" th:href="@{/css/flexslider.css}">

    <!-- Pricing -->
    <link rel="stylesheet" th:href="@{/css/pricing.css}">

    <!-- Theme style  -->
    <link rel="stylesheet" th:href="@{/css/style.css}">

    <!-- Modernizr JS -->
    <script th:src="@{/js/modernizr-2.6.2.min.js}"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]-->
    <script th:src="@{/js/respond.min.js}"></script>
    <!--[endif]-->

    </head>

    <style>

        .list-content ul{
            list-style: none;
            padding: 0;
        }

        .list-content ul li{
            padding: 0 5px;
            margin: 8px 0;
        }

        .list-content ul li a{
            color: #3f3f3f;
            font-size: 14px;
        }

        .list-content ul li a .click-item{
            padding: 5px 0;
            color: #3f3f3f;
            font-size: 14px;
        }

        .reply{
            color: #3f3f3f;
            font-size: 12px;
            margin-left: 20px;
        }
        .reply:hover{
            color: #000000;
            font-size: 12px;
            margin-left: 20px;
        }

        .attachment{
            color: #3f3f3f;
            font-size: 14px;
        }

        .list-content ul li a.active .click-item{
            background-color: white;
            color: #3f3f3f;
            font-size: 14px;
        }



        .list-content ul li a .click-item:hover{
            background-color: white;
            color: #3f3f3f;
            font-size: 14px;
        }

        .username{
            font-weight: bold;
        }

        .logout{
            font-size: 12px;
        }

        .user-avatar{
            margin-right: 10px;
            width: 27px;
            height: 27px;
        }

        .no-comment{
            border-top: lightgray 1px solid;
            text-align: center;
            padding-top: 30px;
            padding-bottom: 30px;
        }

    </style>
    <body>

    <div class="fh5co-loader"></div>

    <div id="page">
        <nav class="fh5co-nav" role="navigation">
            <div class="top-menu" style="box-shadow: 0px 2px 5px #f4f4f4;">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-2">
                            <div id="fh5co-logo"><a href="index.html"><i class="icon-study"></i>Educ<span>.</span></a></div>
                        </div>
                        <div class="col-xs-10 text-right menu-1">
                            <ul class="navBar">
                                <li><a th:href="@{/index}">首页</a></li>
                                <li class="active"><a href="">热门课程</a></li>
                                <li class="btn-cta"><a th:href="@{/login}"><span>登录</span></a></li>
                                <li class="btn-cta"><a th:href="@{/register}"><span>加入课程</span></a></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </nav>

        <div class="container">

            <!--面包屑导航-->
            <div class="row" style="padding-top: 5px">
                <ol class="breadcrumb" style="background-color: white">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">热门课程</a></li>
                    <li class="active"><span class="courseName"></span></li>
                </ol>
            </div>

            <!--播放控制界面-->
            <div class="row">
                <div class="col-md-9">

                    <div style="height: 50px">
                        <h4 style="margin: 0"><span class="lessonName"></span></h4>
                        <small style="color: gray">2022-2-26 10:40</small>
                    </div>

                    <video controls style="width:100%; height :100%; object-fit: fill"></video>

                    <div>
                        <p>附件链接：<span id="attachmentUrl"></span></p>
                    </div>
                </div>

                <div class="col-md-3">

                    <div style="height: 50px">
                        <h3><span class="courseName"></span></h3>
                    </div>


                    <!--视频列表-->
                    <div class="video-list" style="background-color: #f4f4f4; width: 100%; height: 480px">

                        <div class="list-header" style="padding: 16px; padding-top: 10px; padding-bottom: 0px; height: 50px">
                            <h4 style="font-size: 16px">视频列表<span class="video-num" style="padding-left: 0.5rem;padding-right: 0.5rem">(20)</span><i class="icon-th-list"></i></h4>
                        </div>

                        <div class="list-content" style="overflow-y: auto ;height: 430px">
                            <ul id="lesson_list">
                            </ul>
                        </div>

                    </div>

                </div>
            </div>

            <!--评论区-->
            <div class="row">
                <div class="col-md-9">

                    <div class="comment">

                        <div class="comment-head" style="padding-top: 10px; padding-bottom: 20px; border-bottom: 1px lightgray solid">
                            <span id="comment_num"></span>
                            <span>评论</span>
                        </div>

                        <div id="tips" style="height: 68px; padding-top: 20px">

                            <span class="center-block" style="text-align: center">请<a th:href="@{/login}">登录</a>后评论</span>
                        </div>

                        <!--发表评论表单-->
                        <form action="" class="form" id="comment-form" hidden>
                            <div class="comment-send" style="display: flex;">
                                <input type="text" name="userId" id="userId" hidden>
                                <input type="text" name="lessonId" id="lessonId" hidden>
                                <!--用户头像-->
                                <div class="current-user-avatar" style="width: 88px;padding: 20px;">
                                    <img th:src="@{/images/person1.jpg}" alt="" class="img-circle" width="68px" height="68px">
                                </div>
                                <!--评论框-->
                                <div class="comment-input" style="flex: 1;padding: 20px; padding-right: 0">
                                    <input type="text" style="height: 68px;" class="form-control" name="content" autocomplete="off" required>
                                </div>
                                <!--发布按钮-->
                                <div class="comment-submit" style=" width: 88px;padding: 20px;">
                                    <button style="width: 68px; height: 68px">
                                        发表
                                    </button>
                                </div>
                            </div>
                        </form>

                        <!--历史评论-->
                        <div class="comment-list">

                        </div>

                        <div class="no-comment">
                            无更多评论
                        </div>

                    </div>

                </div>
            </div>

        </div>



        <footer id="fh5co-footer" role="contentinfo" style="background-image: url(../../images/img_bg_4.jpg);">
            <div class="overlay"></div>
            <div class="container">
                <div class="row copyright">
                    <div class="col-md-12 text-center">
                        <p>
                            <small class="block">Copyright &copy; 2017.Company name All rights reserved.</small>
                        </p>
                    </div>
                </div>

            </div>
        </footer>
    </div>

    <div class="gototop js-top">
        <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
    </div>

    <!-- jQuery -->
    <script th:src="@{/js/jquery.min.js}"></script>
    <!-- jQuery Easing -->
    <script th:src="@{/js/jquery.easing.1.3.js}"></script>
    <!-- Bootstrap -->
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <!-- Waypoints -->
    <script th:src="@{/js/jquery.waypoints.min.js}"></script>
    <!-- Stellar Parallax -->
    <script th:src="@{/js/jquery.stellar.min.js}"></script>
    <!-- Carousel -->
    <script th:src="@{/js/owl.carousel.min.js}"></script>
    <!-- Flexslider -->
    <script th:src="@{/js/jquery.flexslider-min.js}"></script>
    <!-- countTo -->
    <script th:src="@{/js/jquery.countTo.js}"></script>
    <!-- Magnific Popup -->
    <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/js/magnific-popup-options.js}"></script>
    <!-- Count Down -->
    <script th:src="@{/js/simplyCountdown.js}"></script>
    <!-- Main -->
    <script th:src="@{/js/main.js}"></script>
    <!-- jQuery.form -->
    <script th:src="@{/js/jquery.form.min.js}"></script>
    <!-- layer -->
    <script th:src="@{/js/layer.js}"></script>



    <script>
        var d = new Date(new Date().getTime() + 1000 * 120 * 120 * 2000);

        //判断当前用户是否登录
        var user = JSON.parse(sessionStorage.getItem("user"));

        var courseId = [[${courseId}]];

        //课程播放列表
        var lessonList = null;
        //当前正在播放的课程
        var playingLesson = 0;

        // default example
        simplyCountdown('.simply-countdown-one', {
            year: d.getFullYear(),
            month: d.getMonth() + 1,
            day: d.getDate()
        });

        //jQuery example
        $('#simply-countdown-losange').simplyCountdown({
            year: d.getFullYear(),
            month: d.getMonth() + 1,
            day: d.getDate(),
            enableUtc: false
        });

        $(function () {

            //用户已登录，显示用户信息
            if(user != null){
                //隐藏登录注册按钮
                $(".navBar > .btn-cta").hide();
                if(user.photo == null || user.photo === ''){
                    $(".navBar").append(
                        '<li><a href="../../information"><img class="user-avatar img-circle" src="../../images/user-default.png"><span class="username">'+user.username+'</span></a></li>'+
                        '<li><a href="javascript:void(0)" class="logout"><span>退出</span></a></li>'
                    );
                }else{
                    $(".navBar").append(
                        '<li><a href="../../information"><img class="user-avatar img-circle" src="'+user.photo+'"><span class="username">'+user.username+'</span></a></li>'+
                        '<li><a href="javascript:void(0)" class="logout"><span>退出</span></a></li>'
                    );
                }

                //设置评论区
                $("#tips").hide();
                $("#comment-form").show();
                $("#userId").val(user.id);
                $(".current-user-avatar > img").attr("src",((user.photo == null || user.photo === '') ? '../../images/user-default.png' : user.photo));
            }

            //退出按钮注册监听
            $(".logout").click(function(){
                sessionStorage.removeItem("user");
                window.location.href = "/client";
            });

            //初始化信息显示
            $.ajax({
                url: "http://localhost:80/api/global/course/"+courseId,
                success: function (result) {
                    if(result.code === 0){
                        var data = result.data;
                        $(".courseName").html(data.name);
                    }
                }
            });

            //加载视频视频列表
            $.ajax({
                url: "http://localhost:80/api/global/course/"+courseId+"/courselesson",
                success: function (result) {
                    if(result.code === 0){
                        lessonList = result.data;
                        //播放列表
                        for (let i = 0; i < lessonList.length; i++) {
                            $("#lesson_list").append(
                                '<li><a href="javascript:void(0)" onclick="setPlayMode('+i+')">' +
                                '<div class="click-item" style="overflow: hidden">' +
                                '<span class="item-num" style="margin: 0 5px">P'+(i+1)+'</span>' +
                                '<span class="item-title">'+lessonList[i].title+'</span>' +
                                '</div>' +
                                '</a></li>'
                            );
                        }
                        //默认播放第一集
                        setPlayMode(0);
                    }
                }
            });

            //评论表单提交
            $('#comment-form').submit(function(){
                var data = $("#comment-form").serialize();
                var options = {
                    type : 'post',
                    url  : 'http://localhost:80/api/person/comment',
                    data : data,
                    headers: {token: user.token},
                    beforeSubmit: function(){
                        //字段验证
                    },
                    success: function(result){
                        //提交成功后返回
                        //发表失败
                        if (data.code !== 0){
                            layer.open({
                                title: '评论',
                                content: data.msg
                            });
                        }
                        //发表成功,刷新当前界面
                        location.reload();
                    },
                };

                $('#comment-form').ajaxSubmit(options);
                return false;
            });
            //回复表单提交
            $('#reply-comment-form').submit(function(){
                var data = $("#reply-comment-form").serialize();
                var options = {
                    type : 'post',
                    url  : 'http://localhost:80/api/person/comment',
                    data : data,
                    headers: {token: user.token},
                    beforeSubmit: function(){
                        //字段验证
                    },
                    success: function(result){
                        //提交成功后返回
                        //发表失败
                        if (data.code !== 0){
                            layer.open({
                                title: '评论',
                                content: data.msg
                            });
                        }
                        //发表成功,刷新当前界面
                        location.reload();
                    },
                };

                $('#reply-comment-form').ajaxSubmit(options);
                return false;
            });

        })
        /**
         * 设置播放课程
         * @param i 课程ID
         */
        function setPlayMode(i) {
            //其他课程设置为未播放样式
            $('#lesson_list>li:eq('+playingLesson+')>a').removeClass("active");
            $('#lesson_list>li:eq('+playingLesson+')>a>div>i').remove();
            //匹配第i个课程,设置为播放样式
            $('#lesson_list>li:eq('+i+')>a').addClass("active");
            $('#lesson_list>li:eq('+i+')>a>div').prepend('<i class="icon-media-play"></i>')
            //设置正在播放课程序号
            playingLesson = i;

            //设置播放课程title
            $(".lessonName").html(lessonList[i].title);
            //播放课程
            if(lessonList != null){
                $("video").attr("src", lessonList[i].video);
            }
            $("#lessonId").val(lessonList[i].id);

            //设置附件下载链接
            if(lessonList[i].attachment != null && lessonList[i].attachment !== ''){
                $("#attachmentUrl > span").remove();
                $("#attachmentUrl").append(
                    '<a href="'+lessonList[i].attachment+'" class="attachment">点击下载</a>'
                )
            }else{
                $("#attachmentUrl > a").remove();
                $("#attachmentUrl > span").remove();
                $("#attachmentUrl").append("<span>暂无链接</span>");
            }

            //加载评论列表
            $.ajax({
                url: "http://localhost:80/api/global/courselesson/"+lessonList[i].id+"/comments",
                success: function (result) {
                    if(result.code === 0){
                        var data = result.data;
                        // 设置评论总数
                        $("#comment_num").html(result.comment_num + '');
                        //删除评论
                        $(".comment-list > .content-body").remove()
                        for (let j = 0; j < data.length; j++) {
                            if(data[j].toUserId != null){
                                $(".comment-list").append(
                                    '<div class="content-body" style="display: flex" >' +
                                    '<!--用户头像-->' +
                                    '<div class="user-avatar" style="width: 88px;padding: 20px;">' +
                                    '<img src="'+((data[j].photo == null || data[j].photo === '') ? '../../images/user-default.png' : data[j].photo)+'" alt="" class="img-circle" width="48px" height="48px">' +
                                    '</div>' +
                                    '<!--评论内容-->' +
                                    '<div class="comment-input" style="flex: 1;padding: 20px; border-top: 1px lightgray solid">' +
                                    data[j].username + ' To '+data[j].toUsername+'：'+data[j].content+
                                    '<div class="comment-time">' +
                                    '<small>'+data[j].replyTime+'</small><a class="reply" href="javascript:void(0)" onclick="replyTo('+data[j].userId+',\''+data[j].username+'\')">回复</a>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>'
                                )
                            }else{
                                $(".comment-list").append(
                                    '<div class="content-body" style="display: flex" >' +
                                    '<!--用户头像-->' +
                                    '<div class="user-avatar" style="width: 88px;padding: 20px;">' +
                                    '<img src="'+((data[j].photo == null || data[j].photo === '') ? '../../images/user-default.png' : data[j].photo)+'" alt="" class="img-circle" width="48px" height="48px">' +
                                    '</div>' +
                                    '<!--评论内容-->' +
                                    '<div class="comment-input" style="flex: 1;padding: 20px; border-top: 1px lightgray solid">' +
                                    data[j].username +'：'+data[j].content+
                                    '<div class="comment-time">' +
                                    '<small>'+data[j].replyTime+'</small><a class="reply" href="javascript:void(0)" onclick="replyTo('+data[j].userId+',\''+data[j].username+'\')">回复</a>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>'
                                )
                            }
                        }
                    }
                }
            });
        }
        
        function replyTo(userId,username) {
            layer.open(
                {
                    type: 1,
                    title: "回复："+username,
                    content: $('#reply-comment-form'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    success: function () {
                        $('#reply-comment-form').append(
                            '<input type="text" name="userId" hidden value="'+user.id+'">'+
                            '<input type="text" name="toUserId" hidden value="'+userId+'">'+
                            '<input type="text" name="lessonId" hidden value="'+lessonList[playingLesson].id+'">'
                        )
                    }
                }
            )
        }
    </script>
    </body>
    <!--发表评论表单-->
    <form action="" class="form" id="reply-comment-form" hidden>
        <div class="comment-send" style="display: flex;">
            <!--评论框-->
            <div class="comment-input" style="flex: 1;padding: 20px; padding-right: 0">
                <input type="text" style="height: 68px;" class="form-control" name="content" autocomplete="off">
            </div>
            <!--发布按钮-->
            <div class="comment-submit" style=" width: 88px;padding: 20px;">
                <button style="width: 30px; height: 68px">
                    发表
                </button>
            </div>
        </div>
    </form>
</html>